<template>
  <div>
    <button @click="flag=!flag">Dom按钮</button>
    <SlotNew :list="list" v-if="flag">
      <template #left="{row}">
        <button @click="cha(row)">查看</button>
        <button @click="del(row.id)">删除</button>
      </template>
    </SlotNew>
    <slotGba :showGba.sync="showGba" title="编辑数据">
      <form>
        姓名<input type="text" v-model="formData.name"><br>
        性别<input type="text" v-model="formData.age">
        <div>
                <button @click="btn">取消</button>
                <button @click="submit">确认</button>
            </div>
      </form>
    </slotGba>
  </div>
</template>
<script>
import SlotNew from './slot/slotNew.vue';
import slotGba from './slot/slotGba.vue';
export default {
  data() {
    return {
      flag:true,
      showGba: false,
      formData:'',
      list: [
        { id: 1, name: "大花", age: 18 },
        { id: 2, name: "小花", age: 16 },
        { id: 3, name: "中花", age: 17 }
      ]
    };
  },
  created() {
  },
  computed: {},
  methods: {
    del(id) {
      this.list = this.list.filter(item => item.id != id)
    },
    cha(row) {
      this.showGba = true
      this.formData =JSON.parse(JSON.stringify(row))//深拷贝
    },
    btn(){
       this.showGba=false
    },
    submit(){
       var obj =  this.list.find(item => item.id == this.formData.id)  
       obj.name = this.formData.name
       obj.age = this.formData.age
       this.showGba=false
    }
  },
  components: {
    SlotNew,
    slotGba
  }
}
</script>
<style lang='less'  scoped></style>
